<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div id="rqdyfx">
        <div v-if="show2018" style="width: 40%;float: left;">
            <c-table
                    :data="sex2018"
                    :props="['guest_sex', 'guest_sex__count', 'zb']"
                    :labels="['男女', '数量', '占比']"
            >
                <template v-slot:year>
                    <h2>2018年数据</h2>
                </template>
                <template v-slot:table>
                    <h3>性别分布</h3>
                </template>
                <template v-slot:echarts>
                    <Pie :data="echarts_sex(sex2018)" name="按性别" title=""></Pie>
                </template>
            </c-table>

            <c-table
                    :data="city_2018"
                    :props="['guest_city', 'ybrs__sum', 'zb']"
                    :labels="['城市', '数量', '占比']"
            >
                <template v-slot:table>
                    <h3>按城市分布</h3>
                </template>
                <template v-slot:echarts>
                    <Pie :data="echars_city(city_2018)" name="按城市" title=""></Pie>
                </template>
            </c-table>

            <c-table
                    :data="province_2018"
                    :props="['guest_province', 'ybrs__sum', 'zb']"
                    :labels="['省份', '数量', '占比']"
            >
                <template v-slot:table>
                    <h3>按省份分布</h3>
                </template>
                <template v-slot:echarts>
                    <Pie :data="echars_province(province_2018)" name="按省份分布" title=""></Pie>
                </template>
            </c-table>
        </div>

        <div v-if="show2019" style="width: 40%;float: right;">
            <c-table
                    :data="sex2019"
                    :props="['guest_sex', 'guest_sex__count', 'zb']"
                    :labels="['男女', '数量', '占比']"
            >
                <template v-slot:year>
                    <h2>2019年数据</h2>
                </template>
                <template v-slot:table>
                    <h3>性别分布</h3>
                </template>
                <template v-slot:echarts>
                    <Pie :data="echarts_sex(sex2019)" name="按性别" title=""></Pie>
                </template>
            </c-table>

            <c-table
                    :data="city_2019"
                    :props="['guest_city', 'ybrs__sum', 'zb']"
                    :labels="['城市', '数量', '占比']"
            >
                <template v-slot:table>
                    <h3>按城市分布</h3>
                </template>
                <template v-slot:echarts>
                    <Pie :data="echars_city(city_2019)" name="按城市" title=""></Pie>
                </template>
            </c-table>

            <c-table
                    :data="province_2019"
                    :props="['guest_province', 'ybrs__sum', 'zb']"
                    :labels="['省份', '数量', '占比']"
            >
                <template v-slot:table>
                    <h3>按省份分布</h3>
                </template>
                <template v-slot:echarts>
                    <Pie :data="echars_province(province_2019)" name="按省份分布" title=""></Pie>
                </template>
            </c-table>
        </div>
    </div>
</template>

<script>
    import Pie from './pie'
    import cTable from "./c-table";

    export default {
        name: "rqdyfx",
        props: ["midData"],
        components: {
            cTable,
            Pie,
        },
        methods: {
            formatData: function (res, d, y) {
                const t = res.filter(item => {
                    return item[d] != null && item[d] !== "";
                });
                const sum = t.reduce((a, b) => a + b[y], 0);
                return t.map(item => {
                    item.zb = ((item[y] / sum) * 100).toFixed(2) + "%";
                    return item;
                });
            }
        },
        computed: {
            sum_city_2018() {
                return this.city_2018.reduce((a, b) => a + b.ybrs__sum, 0);
            },
            show2018() {
                return !!this.midData.res2018;
            },
            show2019() {
                return !!this.midData.res2019;
            },
            sex2018() {
                return this.formatData(
                    this.midData.res2018.sex,
                    "guest_sex",
                    "guest_sex__count"
                );
            },
            sex2019() {
                return this.formatData(
                    this.midData.res2019.sex,
                    "guest_sex",
                    "guest_sex__count"
                );
            },
            province_2018() {
                return this.formatData(
                    this.midData.res2018.province,
                    "guest_province",
                    "ybrs__sum"
                );
            },
            province_2019() {
                return this.formatData(
                    this.midData.res2019.province,
                    "guest_province",
                    "ybrs__sum"
                );
            },
            city_2018() {
                return this.formatData(
                    this.midData.res2018.city,
                    "guest_city",
                    "ybrs__sum"
                );
            },
            city_2019() {
                return this.formatData(
                    this.midData.res2019.city,
                    "guest_city",
                    "ybrs__sum"
                );
            },
            echarts_sex() {
                return function t(d) {
                    const res = [];
                    d.forEach(item => {
                        res.push({
                            value: item.guest_sex__count,
                            name: item.guest_sex
                        });
                    });
                    return res;
                }
            },
            echars_province() {
                return function t(d) {
                    const res = [];
                    d.forEach((item, index) => {
                        if (index === 10) {
                            res.push({
                                value: item.ybrs__sum,
                                name: '其他'
                            })
                        } else if (index > 10) {
                            res[10].value += item.ybrs__sum
                        } else {
                            res.push({
                                value: item.ybrs__sum,
                                name: item.guest_province
                            })
                        }

                    });
                    return res
                }
            },
            echars_city() {
                return function t(d) {
                    const res = [];
                    d.forEach((item, index) => {
                        if (index === 10) {
                            res.push({
                                value: item.ybrs__sum,
                                name: '其他'
                            })
                        } else if (index > 10) {
                            res[10].value += item.ybrs__sum
                        } else {
                            res.push({
                                value: item.ybrs__sum,
                                name: item.guest_city
                            });
                        }

                    });
                    return res;
                }
            }

        },
    };
</script>

<style scoped>

</style>